<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>$.htmlClean</title>
    <style type="text/css">
        html, body
        {
            background-color: #fcf9f3;
        }
        .input, .result
        {
            font-family: Monospace;
        }
        .success
        {
            color: #0c0;
        }
        .failure
        {
            color: #c00;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="jquery.htmlClean.js"></script>
    <script type="text/javascript">
        function encode(value) {
            return value
                .replace(/\&/g, '&amp;')
                .replace(/\</g, '&lt;')
                .replace(/\>/g, '&gt;');

        }
        function clean(input, expected, options) {
            document.write("<p class='input'>".concat(encode(input), "</p>"));
            test_isEqual($.htmlClean(input, options), expected)
        }
        function trim(input, expected, options) {
            document.write("<p class='input'>".concat(encode(input), "</p>"));
            test_isEqual($.htmlClean.trim(input, options), expected)
        }
        function trimStart(input, expected, options) {
            document.write("<p class='input'>".concat(encode(input), "</p>"));
            test_isEqual($.htmlClean.trimStart(input, options), expected)
        }
        function trimEnd(input, expected, options) {
            document.write("<p class='input'>".concat(encode(input), "</p>"));
            test_isEqual($.htmlClean.trimEnd(input, options), expected)
        }
        function test_isEqual(actual, expected) {
            document.write("<p class='result ".concat(
                actual == expected ? "success" : "failure",
                "'>actual&nbsp;&nbsp;: '", encode(actual), "'<br />expected: '", encode(expected), "'</p>"));
        }
    </script>
</head>
<body>
    <p><a href="http://code.google.com/p/jquery-clean/">http://code.google.com/p/jquery-clean/</a></p>
    <textarea id="dirty" cols="80" rows="20">
        <strong>Welkom bij BeteoR</strong>
        <div>
            <br>
        </div>
        <div>
            Organisatie en Adviesgroep BeteoR verzorgt opdrachten op het gebied van HRM voor
            en met:</div>
        <div>
            <br>
        </div>
        <div>
            <ul>
                <li>Onderwijsinstellingen</li>
                <li>Bedrijven</li>
                <li>Zorg &amp; Welzijn</li>
            </ul>
        </div>
    </textarea>

    <h2>Clean</h2>
    <script type="text/javascript">        
    	clean(
            $("#dirty").val(), "<strong>Welkom bij BeteoR</strong><div><br /></div><div>Organisatie en Adviesgroep BeteoR verzorgt opdrachten op het gebied van HRM voor en met:</div><div><br /></div><div><ul><li>Onderwijsinstellingen</li><li>Bedrijven</li><li>Zorg & Welzijn</li></ul></div>",
            {
                format:false, 
                allowedTags:["div","ul","li","br","strong"],
                removeAttrs:["class","style","id"]
            });
    	
    </script>
</body>
</html>
